<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import ColorPicker from '@/components/ColorPicker/index.vue'
import IconPicker from '@/components/IconPicker/index.vue'
import * as fabric from 'fabric';
defineOptions({
  name: 'DrawingBoard'
})

const lineWidth = ref(20);
const color = ref('#000000');
const shadow = ref({
  width: 0,
  offset: 0,
  color: '#000000'
})

const iconText = ref('iconText')

const canvasRef = ref<HTMLCanvasElement|null>(null)
let freeDrawingBrush:any = null;
let canvas:fabric.Canvas|null = null;

/**
 * 切换模式
 */
function toggleMode(){
    if(canvas){
        canvas.isDrawingMode = !canvas.isDrawingMode;
    }

}
/**
 * 清理
 */
function clear(){
    if(canvas){
        canvas.clear();
    }
}

function undo(){
    if(canvas){
        let objects = canvas.getObjects();
        if(objects.length > 0){
            let lastObject = objects[objects.length - 1];
            if(lastObject){
                canvas.remove(lastObject);
                canvas.renderAll();
            }
        }
    }
}

function addIcon(e:any):void{
  if(canvas === null){
    return ;
  }

  console.log(e.text);
  const icon = new fabric.IText(e.text, {
    left: 370,
    top: 370,
    fontFamily: e.fontFamily,
    fontSize: 60,
    fill: color.value
  });

  canvas.add(icon);

}

/**
 * 旋转
 * @param deg
 */
function rotate(deg:number) {
    if(canvas === null){
        return ;
    }
    if(!canvas.isDrawingMode){
        canvas.isDrawingMode = true;

        canvas.selection = false;
        canvas.forEachObject(function(obj) {
            obj.set({
                hasControls: false,
                hasBorders: false
            });
        });

    }


    const center = canvas.getCenter();

    canvas.getObjects().forEach(obj => {
        // 计算对象相对于画布中心的位置向量
        const vector = {
            x: obj.left - center.left,
            y: obj.top - center.top
        };

        // 旋转位置向量
        const radians = fabric.util.degreesToRadians(deg);
        const newVector = {
            x: vector.x * Math.cos(radians) - vector.y * Math.sin(radians),
            y: vector.x * Math.sin(radians) + vector.y * Math.cos(radians)
        };

        // 更新对象位置和角度
        obj.set({
            left: center.left + newVector.x,
            top: center.top + newVector.y,
            angle: (obj.angle + deg) % 360
        });
    });

    canvas.renderAll();
}




defineExpose({rotate})

onMounted(()=>{
    if(canvasRef && canvasRef.value){
        canvas = new fabric.Canvas(canvasRef.value, {
            isDrawingMode: true,
        });

        canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
        fabric.Object.prototype.transparentCorners = false;
        freeDrawingBrush = canvas.freeDrawingBrush;

        freeDrawingBrush.color = color.value;
        freeDrawingBrush.width = lineWidth.value;

        freeDrawingBrush.shadow = new fabric.Shadow({
            blur: shadow?.value?.width,
            offsetX: shadow?.value?.offset,
            offsetY: shadow?.value?.offset,
            affectStroke: true,
            color: shadow?.value?.color,
        });



    }

});



watch(() => color, (newVal) => {
   freeDrawingBrush.color = newVal.value;
},{
    deep: true
})

watch(() => lineWidth, (newVal) => {
   freeDrawingBrush.width = newVal.value;
},{
    deep: true
})

watch(() => shadow, (newVal) => {
   freeDrawingBrush.shadow = new fabric.Shadow({
        blur: newVal?.value?.width,
        offsetX: newVal?.value?.offset,
        offsetY: newVal?.value?.offset,
        affectStroke: true,
        color: newVal?.value?.color,
    });
},{

  deep: true
})

</script>
<template>
    <div class="canvas-wrapper">
        <canvas class="canvas" id="canvas" width="800" height="800" ref="canvasRef"></canvas>
    </div>

    <div class="drawing-tool-bar">
        <van-button type="danger" plain class="btn-clear tool-item plain" @click="clear"><span class="iconfont icon-clear"></span></van-button>
        <van-button type="warning" plain class="btn-backspace  tool-item plain" @click="undo"><span class="iconfont icon-backspace"></span></van-button>
        <color-picker class="tool-color tool-item" v-model="color" :radius="400" position="left"></color-picker>
        <van-slider class="tool-line-width  tool-item" :max="200" v-model="lineWidth" vertical>
        <template #button>
            <div class="slider-cursor">{{ lineWidth }}</div>
        </template>
        </van-slider>
        <van-button type="primary" plain class="btn-edit  tool-item plain" @click="toggleMode"><span class="iconfont icon-transform"></span></van-button>
        <icon-picker :color="color" @change="addIcon"/>
    </div>

</template>
<style scoped lang="scss">
    .canvas-wrapper{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;

    }
    .canvas{
        background-color: #FFFFFF;
        width: 100%;
        height: 100%;
    }

    .drawing-tool-bar{
        position: absolute;
        right: 0;
        bottom: 0;
        top:0;
        padding-top:60px;
        align-items: center;
        background: #FFFFFF;
        width: 80px;
        display: flex;
        flex-direction: column;

        .tool-item{
            margin-top: 20px;
        }
        .tool-line-width{
            height: 150px;
        }

        .tool-item.plain{
            font-size: 40px;
            padding: 0;
            width: 50px;
            height: 50px;
            border: none;

        }

    }

    .slider-cursor{
        background-color:#1989fa;
        color:#FFFFFF;
        border-radius: 20px;
        font-size: 14px;
        padding:4px 0;
        width: 40px;
        text-align: center;
    }
</style>
